<%@ page import="com.ws.haungjia.utils.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <style>
        /* 轮播图容器样式 - 修改后 */
        #carousel-example-generic {
            margin: 0 auto;
            width: 100%;
            max-width: 1200px;
            height: 500px; /* 固定高度 */
            overflow: hidden;
        }

        /* 轮播项样式 - 修改后 */
        .carousel-inner {
            width: 100%;
            height: 100%;
        }

        .carousel-inner .item {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        /* 图片样式 - 关键修改 */
        .carousel-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持比例并裁剪 */
            object-position: center;
        }

        /* 轮播控制按钮样式 */
        .carousel-control {
            width: 5%;
        }

        /* 响应式适配 - 新增 */
        @media (max-width: 768px) {
            #carousel-example-generic {
                height: 300px;
            }
        }

        /* 其他原有样式保持不变 */
        .topbar{position:relative}
        .hottel,.haslogin{position:absolute;top:12px;right:50px}
        .hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
        .hottel a{color:#666;text-decoration:none}
        .haslogin{top:45px;right:0}
        .haslogin p{font-weight:700;float:left;margin-right:30px;font-size:18px}
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>顽石旅行网</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css">
    <!--[if lt IE 9]>
      <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
      <script src="${ pageContext.request.contextPath}/js/respod.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 头部 start -->
<header id="header">
    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="${pageContext.request.contextPath}/images/logo.png" style="height: 60px;" alt=""></a>
            </div>
            <div class="search">
                <input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                <a href="${pageContext.request.contextPath}/tiao" class="search-button">搜索</a>
            </div>
            <c:if test="${user==null}">
                <div class="hottel">
                    <a href="${ pageContext.request.contextPath}/tiaozhuan10"><p>登录</p></a>
                    <a href="register.jsp"><p>注册</p></a>
                </div>
            </c:if>
            <c:if test="${user!=null}">
                <div class="haslogin">
                    <p>欢迎：<a href="${pageContext.request.contextPath}/geren/cha?id=${user.userID}">${user.name}</a></p>
                    <p><a href="${pageContext.request.contextPath}/qianduan/tuichu">退出登录</a></p>
                </div>
            </c:if>
        </div>
    </div>
</header>
<!-- 头部 end -->

<!-- 首页导航-->
<div class="navitem">
    <ul class="nav">
        <li class="nav-active"><a href="index.html">首页</a></li>
        <c:forEach items="${fenlie}" var="list">
            <li><a href="${pageContext.request.contextPath}/qianhou/chafenlei?fid=${list.fid}">${list.fname}</a></li>
        </c:forEach>
    </ul>
</div>

<!-- 轮播图 start - 修改后 -->
<section id="banner">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <c:forEach items="${lunbos}" var="list" varStatus="status">
                <li data-target="#carousel-example-generic" data-slide-to="${status.index}"
                    class="${status.first ? 'active' : ''}"></li>
            </c:forEach>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <c:forEach items="${lunbos}" var="list" varStatus="status">
                <div class="item ${status.first ? 'active' : ''}">
                    <img src="<%=Res.fileUri%>${list.tupian}" class="img-responsive">
                </div>
            </c:forEach>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<!-- 轮播图 end -->

<!-- 其他内容保持不变 -->
<section id="content">
    <!-- 顽石精选start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_6.jpg" alt="">
                <span>${fenlie.get(0).fname}</span>
            </div>
        </div>
        <div class="gn">
            <div class="row">
                <c:forEach items="${luxians}" var="list">
                    <c:if test="${fenlie.get(0).fid==list.fid}">
                        <div class="col-md-3">
                            <a href="${ pageContext.request.contextPath}/qianhou/xiangxiye?packageID=${list.packageID}">
                                <img src="<%=Res.fileUri%>${list.zhutu}" alt="" width="284px" height="165px">
                                <div class="has_border">
                                    <h3>${list.zhuangtai}</h3>
                                    <div class="price">网付价<em>￥</em><strong>${list.jiage}</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </div>
    </section>
    <!-- 顽石精选end-->

    <!-- 国内游 start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_6.jpg" alt="">
                <span>${fenlie.get(1).fname}</span>
            </div>
        </div>
        <div class="gn">
            <div class="row">
                <c:forEach items="${luxians}" var="list">
                    <c:if test="${fenlie.get(1).fid==list.fid}">
                        <div class="col-md-3">
                            <a href="${ pageContext.request.contextPath}/qianhou/xiangxiye?packageID=${list.packageID}">
                                <img src="<%=Res.fileUri%>${list.zhutu}" alt="" width="284px" height="165px">
                                <div class="has_border">
                                    <h3>${list.zhuangtai}</h3>
                                    <div class="price">网付价<em>￥</em><strong>${list.jiage}</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </div>
    </section>
    <!-- 国内游 end-->

    <!-- 境外游 start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_7.jpg" alt="">
                <span>${fenlie.get(2).fname}</span>
            </div>
        </div>
        <div class="gn">
            <div class="row">
                <c:forEach items="${luxians}" var="list">
                    <c:if test="${fenlie.get(2).fid==list.fid}">
                        <div class="col-md-3">
                            <a href="${ pageContext.request.contextPath}/qianhou/xiangxiye?packageID=${list.packageID}">
                                <img src="<%=Res.fileUri%>${list.zhutu}" alt="" width="284px" height="165px">
                                <div class="has_border">
                                    <h3>${list.zhuangtai}</h3>
                                    <div class="price">网付价<em>￥</em><strong>${list.jiage}</strong><em>起</em></div>
                                </div>
                            </a>
                        </div>
                    </c:if>
                </c:forEach>
                <!-- 其他三个相同结构省略 -->
            </div>
        </div>
    </section>
    <!-- 境外游 end-->
</section>

<!-- 尾部 start-->
<footer id="footer">
    <div class="company">
        <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
    </div>
</footer>

<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/include.js"></script>
</body>
</html>